<!-- 编辑列的弹窗 -->
<template>
  <el-dialog width="70%" :title="deviceName + '信息'" v-model="editColDialogVisible" modal draggable @close="closeDialog"
    :close-on-click-modal="false">
    <el-table :data="gridData" v-loading="loading" max-height="50vh">
      <template slot="empty"> 请在编辑中点击”确定“重新生成列 </template>
      <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
      <el-table-column property="colName" label="列名称" width="150">
        <template slot-scope="{ row }">
          <el-input size="mini" link v-model="row.colName" v-show="row.isEditor" />
          <span v-show="!row.isEditor">{{ row.colName }}</span>
        </template>
      </el-table-column>
      <el-table-column property="zyType" label="单双面">
        <template slot-scope="{ row }">
          <el-select v-model="row.zyType" clearable placeholder="请选择" size="mini" v-show="row.isEditor"
            v-if="row.isEditor">
            <el-option v-for="option in zyTypeOptions" :key="option.value" :label="option.label"
              :value="option.value" />
          </el-select>
          <span v-else>{{ getZyTypeLabel(row.zyType) }}</span>
        </template>
      </el-table-column>
      <el-table-column property="divNum" label="层数">
        <template slot-scope="{ row }">
          <el-input size="mini" type="number" v-model="row.divNum" v-show="row.isEditor" />
          <span v-show="!row.isEditor">{{ row.divNum }}</span>
        </template>
      </el-table-column>
      <el-table-column property="divWidth" label="层宽(厘米)">
        <template slot-scope="{ row }">
          <el-input size="mini" type="number" v-model="row.divWidth" v-show="row.isEditor" />
          <span v-show="!row.isEditor">{{ row.divWidth }}</span>
        </template>
      </el-table-column>
      <el-table-column property="fixedFlag" label="固定列标识">
        <template slot-scope="{ row }">
          <span>{{ row.fixedFlag == 0 ? '否' : '是' }} </span>
        </template>
      </el-table-column>
      <el-table-column property="quNo" label="区号">
        <template slot-scope="{ row }">
          <el-input size="mini" type="number" v-model="row.quNo" v-show="row.isEditor" />
          <span v-show="!row.isEditor">{{ row.quNo }}</span>
        </template>
      </el-table-column>
      <el-table-column property="quNo" label="列号">
        <template slot-scope="{ row }">
          <el-input size="mini" type="number" v-model="row.colNo" v-show="row.isEditor" />
          <span v-show="!row.isEditor">{{ row.colNo }}</span>
        </template>
      </el-table-column>
      <el-table-column property="sort" label="排序（可用于排序列显）">
        <template slot-scope="{ row }">
          <el-input size="mini" type="number" v-model="row.sort" v-show="row.isEditor" />
          <span v-show="!row.isEditor">{{ row.sort }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="isPos" property="posNum" label="位数">
        <template slot-scope="{ row }">
          <el-input size="mini" type="number" v-model="row.posNum" v-show="row.isEditor" />
          <span v-show="!row.isEditor">{{ row.posNum }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="isPos" property="posWidth" label="位宽(厘米)">
        <template slot-scope="{ row }">
          <el-input size="mini" type="number" v-model="row.posWidth" v-show="row.isEditor" />
          <span v-show="!row.isEditor">{{ row.posWidth }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button v-show="!row.isEditor" link size="mini" @click="handleEdit(row)">编辑</el-button>

          <el-button v-show="row.isEditor" link size="mini" @click="saveEdit(row)">保存</el-button>
          <el-button v-show="row.isEditor" link size="mini" @click="cancelSave(row)">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="generateLocation" type="primary">生成库位</el-button>
      <el-button size="mini" type="danger" @click="removePosition(nowdDeviceId)">清空库位</el-button>
      <el-button size="mini" type="danger" @click="clearCol(nowdDeviceId)">清空列</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  getColInfo,
  basCabinetColEdit,
  generatingByCol,
  rfidCabinetPositionDel,
  cleanUp,
} from '@/api/bas/cabinet'

export default {
  name: 'editColDialog',
  components: {},
  data() {
    return {
      editColDialogVisible: false,
      deviceName: '',
      gridData: [],
      loading: false,
      dbClickIndex: null,
      dbClickLabel: '',
      nowdDeviceId: null,
      isPos: false,
      zyTypeOptions: [
        { label: 'AB面', value: '0' },
        { label: '左右', value: '1' },
        { label: 'A面', value: '2' },
        { label: 'B面', value: '3' },
        { label: '左面', value: '4' },
        { label: '右面', value: '5' },
      ],
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 获取对应的标签
    getZyTypeLabel(value) {
      const options = this.zyTypeOptions
      return options.find((option) => option.value === value)?.label || ''
    },
    // 清空库位
    removePosition(id) {
      this.$confirm('此操作将永久清空库位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          rfidCabinetPositionDel(id).then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message)
              this.closeDialog()
            } else {
              this.$message.warning(res.data.message)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },

    // 清空列
    clearCol(id) {
      this.$confirm('此操作将清除装具列, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          cleanUp(id).then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message)
              this.closeDialog()
            } else {
              this.$message.warning(res.data.message)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },

    // 生成库位
    generateLocation() {
      generatingByCol(this.gridData).then(
        (res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
          } else {
            this.$message.warning(res.data.message)
          }
        },
        (err) => {
          this.$message.error(err)
        }
      )
    },
    // 编辑列
    handleEdit(row) {
      row.editing = JSON.parse(JSON.stringify(row))
      row.isEditor = true
    },
    // 保存
    saveEdit(row) {
      basCabinetColEdit(row)
        .then((res) => {
          if (res.data.code === 200) {
            // 将编辑后的数据应用到原始数据  
            /**
             * 此处出现了个bug，点击保存后，数据没有及时更新，需要手动刷新页面 
             * 现将Object.assign(row, row.editing)注释掉，解决此问题，
             * 因上次出现问题是更改数据点击取消之后，界面变为数据更改之后的 在此处做记录
             * 现测两个问题都已解决
             */
            // Object.assign(row, row.editing)
            row.isEditor = false // 切换编辑状态
            this.$message.success(res.data.message)
          } else {
            this.$message.warning(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    // 取消保存
    cancelSave(row) {
      // 恢复原始数据
      Object.assign(row, row.editing)
      row.isEditor = false // 切换编辑状态
    },
    // getcolinfo
    // 获取密集架的信息
    async getcolinfo(deviceId) {
      this.nowdDeviceId = deviceId
      await getColInfo(deviceId)
        .then((res) => {
          if (res.data.code === 200) {
            this.gridData = res.data.data.map((item) => {
              return {
                ...item,
                zyType: String(item.zyType),
                isEditor: false,
                editing: {},
              }
            })
            // 赋值给gridData
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    // 打开对话框
    openDialog(row) {
      this.loading = true
      this.isPos = row.posNum !== null && row.posNum > 0
      this.deviceName = row.deviceName
      this.editColDialogVisible = true
      this.getcolinfo(row.deviceId)
      setTimeout(() => {
        this.loading = false
        // 优化用户体验
      }, 1000)
    },
    // 关闭对话框
    closeDialog() {
      this.editColDialogVisible = false
    },
  },
  created() { },
  mounted() { },
}
</script>
<style lang="less" scoped>
.el-table {
  display: flex;
  flex-direction: column;
}

.el-table__header-wrapper {
  overflow: unset;
}
</style>
